<template>
	<view class="shzy-wrap">
		<u-form :model="formData" :rules="rules" ref="formData" :error-type="['toast']">
			<u-form-item class="text-input" prop="defect" required label-width="150" label="缺陷 :">
				<!-- <u-input type="text"
					v-model="formData.defect"  placeholder="请选择缺陷" /> -->
				<shzy-select v-model="formData.defect" placeholder="请选择缺陷" :options="defectBaseData"
					:props="{label:'name',value:'id'}">
				</shzy-select>

			</u-form-item>
			<u-form-item class="text-input" prop="defectQty" required label-width="150" label="数量 :">
				<u-input type="text" v-model="formData.defectQty" placeholder="请输入数量" />
			</u-form-item>
			<u-form-item class="text-input" label-width="150" label="描述 :">

				<u-input type="textarea" v-model="formData.remark" placeholder="请输入描述" />

			</u-form-item>
			<u-form-item class="text-input" label-width="150" label="附件 :">
				<shzy-file v-model="fileList" />
			</u-form-item>
		</u-form>

		<view style="background-color: white; padding-top:20px;padding-bottom: 47px;">
			<shzy-steps :list="list" useSlot>
				<template v-slot:default="{data}">
					<view class="flex-center">
						<u-tag :text="data.defectName"></u-tag> <u-tag :text="data.defectQty"
							style="margin-left:5px;"></u-tag>
					</view>
					<text>{{data.remark}}</text>
					<shzy-file v-model="data.fileInfo" showButton :disabled="true" />
					<view style="display: flex;justify-content: flex-end;">
						
						<view class="step-time">{{data.creatorUserId}}提交于{{data.creatorTime}}</view>
						<u-icon name="trash" color="#ff0000" label="删除" label-color="#ff0000"
							style="margin-left: auto;" @click="showPopup(true,data.id)"></u-icon>
					</view>
					
				</template>
			</shzy-steps>
		</view>
		<view class="buttom-actions">
			<u-button class="buttom-btn" type="primary" @click="submit">保存</u-button>
		</view>

		<u-toast ref="uToast" />
		
		<!-- 删除提示 -->
		<view>
			<u-popup v-model="popupshow" mode="center" :closeable="true" width="500" height="400" border-radius="10">
				<view style="margin:12px 0 0 10px;font-size: 16px;">提示</view>
				<view style="border-bottom: 1px solid lightgray;padding-top: 8px;"></view>
				<view>
				
					<view class="popup_hint">
						<u-icon name="info-circle-fill" color="#e6a23c"
							style="margin-left: 12px;"/>
						<text style="margin-left: 20rpx;">此操作将永久删除该数据, 是否继续？</text>	
					</view>
					
					
					<!-- 按钮 -->
					<view>
						<u-button class="buttom-btn2" @click="showPopup(false,null)">
							取消
						</u-button>
						<u-button class="buttom-btn2" type="primary" @click="deleteInspectionitemdefect">
							确定
						</u-button>
					</view>
					
				</view>
			</u-popup>
		</view>
		
	</view>
</template>

<script>
	import {
		getInspectionitemdefectList,
		createInspectionitemdefect,
		deleteInspectionitemdefect
	} from '@/api/q1/business/inspection/ipqcinspectionlot.js'
	import upopup from '@/uview-ui/components/u-popup/u-popup.vue'
	export default {
		data() {
			return {
				formData: {

				},
				rules: {
					defect: [{
						required: true,
						message: '请选择缺陷',
						trigger: 'blur'
					}],
					defectQty: [{
						required: true,
						message: '请输入数量',
						trigger: 'blur',
						type: "number"
					}]
				},
				numberIndex: null,
				fileList: [],
				list: [],
				defectBaseData: [],
				popupshow:false,
				id:''
			}
		},
		created() {
			this.getDefectBaseData()
		},
		onLoad(e) {
			this.formData = JSON.parse(decodeURIComponent(e.formData))
			this.numberIndex = Number(e.index) + 1;
			this.getInspectionitemdefectListApi()
		},
		onReady() {
			this.$refs.formData.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.formData.validate(valid => {
					if (valid) {
						let defectInfo = this.defectBaseData.find(x => x.id == this.formData.defect)
						this.formData.defectName = defectInfo.name;
						this.formData.severity = defectInfo.severity;
						const data = {
							defect: this.formData.defect,
							defectName: this.formData.defectName,
							defectQty: this.formData.defectQty,
							fileInfo: this.fileList,
							inspectionItem: this.formData.Id,
							number: this.numberIndex,
							remark: this.formData.remark,
							severity: this.formData.severity
						}
						
						createInspectionitemdefect(data).then(res => {
							if (res.code == 200) {
								this.$refs.uToast.show({
									title: '保存成功',
									type: 'success',
									duration: 100,
									callback:()=>{
										this.getDefectBaseData()
										this.getInspectionitemdefectListApi();
										this.fileList=[];
										// 保留this.formData.Id,不然会导致查询没有id参数
										const id = this.formData.Id;
										this.formData={};
										this.formData.Id = id;
									}, 
									bind:this
								})
							}
						})
					}
				})
				// createInspectionitemdefect()
			},
			getDefectBaseData() {
				this.$store.dispatch('qms/getDefactData').then((res) => {
					this.defectBaseData = res
				})
			},
			getInspectionitemdefectListApi() {
				
				let query = {
					inspectionItem: this.formData.Id,
					number: this.numberIndex
				}
				getInspectionitemdefectList(query).then(res => {
					this.list = res.data.list
				})
			},
			
			showPopup(flag,id){
				this.popupshow = flag;// 显示弹窗
				this.id = flag == true ? id : '';// 获取id
			},
			
			deleteInspectionitemdefect(){
				
				deleteInspectionitemdefect(this.id).then(res => {
					if(res.code == 200){
						
						this.$refs.uToast.show({
							title: '删除成功',
							type: 'success',
							duration: 100,
							callback:()=>{
								this.popupshow = false;
								this.getDefectBaseData()
								this.getInspectionitemdefectListApi();
							}, 
							bind:this
						})
						
					}
				})
				
			}
		}

	}
</script>

<style scoped lang="scss">
	.u-steps {
		padding: 0px 17px !important;
	}

	.flex-center {
		display: flex;
	}

	.step-time {
		font-size: 12rpx;
		color: #606266;
		word-break: break-all;
	}
	.popup_hint{
		display: flex;
		margin: 50rpx 0 20px 0;
	}
	.buttom-btn2 {
		margin-top: 35rpx;
		margin-left: 30rpx;
		width: 42%;
		float: left;
	}
</style>